
<template>
  <div>
    <!-- 派车单详情dialog-->
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      v-dialogDrag
      :visible.sync="editVisible"
      class="tableDialog"
    >
      <div class="detail">
        <table class="detail-table" cellspacing="0" cellpadding="0">
          <tr class="view-container">
            <td class="label-container">车牌号</td>
            <td class="form-container">{{this.viewForm.truckNumber}}</td>
            <td class="label-container">车轴</td>
            <td class="form-container">{{this.viewForm.axle}}</td>
          </tr>
          <tr class="view-container">
            <td class="label-container">派车单状态</td>
            <td class="form-container">{{$dictUtils.getDictLabel("transState", this.viewForm.state, "")}}</td>
            <td class="label-container">来源</td>
            <td class="form-container">{{$dictUtils.getDictLabel("transSourceType", this.viewForm.sourceType, "")}}</td>

          </tr>
          <tr class="view-container">
            <td class="label-container">派车单号</td>
            <td class="form-container">{{this.viewForm.transCode}}</td>
            <td class="label-container"></td>
            <td class="form-container"></td>
          </tr>
        </table>
      </div>


      <div class="detail">
        <table class="detail-table" cellspacing="0" cellpadding="0">

          <tr class="view-container">
            <td class="label-container">发运计划</td>
            <td class="form-container">{{this.viewForm.planCode}}</td>
            <td class="label-container">货物</td>
            <td class="form-container">{{this.viewForm.productName}}</td>
          </tr>
          <tr class="view-container">
            <td class="label-container">发货单位</td>
            <td class="form-container">{{this.viewForm.sendAddress}}</td>
            <td class="label-container">收货单位</td>
            <td class="form-container">{{this.viewForm.receiveAddress}}</td>
          </tr>
          <tr class="view-container">
            <td class="label-container">发货地址</td>
            <td class="form-container">{{this.viewForm.sendAddressDetail}}</td>
            <td class="label-container">收货地址</td>
            <td class="form-container">{{this.viewForm.receiveAddressDetail}}</td>
          </tr>
          <tr class="view-container">
            <td class="label-container">司机</td>
            <td class="form-container">{{this.viewForm.driverName}} {{this.viewForm.driverPhone}}</td>
            <td class="label-container">司机证件号</td>
            <td class="form-container">{{this.viewForm.driverIdcard}}</td>
          </tr>

          <tr class="view-container">
            <td class="label-container">原发/实收数</td>
            <td class="form-container">{{this.viewForm.originalWeight}}</td>
            <td class="label-container">装货/卸货时间</td>
            <td class="form-container">{{this.viewForm.originalDate}}</td>
          </tr>
          <tr class="view-container">
            <td class="label-container">接单有效时长</td>
            <td class="form-container">
              <span class="mark">超出时间未接单，则派车单自动作废</span>
              {{this.viewForm.effectiveHourLoad}} 小时
              <!--          <el-input-number v-model="this.viewForm.effectiveHourLoad" controls-position="right" disabled></el-input-number>-->
            </td>
            <td class="label-container">进厂有效时长</td>
            <td class="form-container">
              <span class="mark">装车到进厂的最大时间间隔</span>
              {{this.viewForm.effectiveHourTransport}} 小时
              <!--          <el-input-number v-model="this.viewForm.effectiveHourTransport" controls-position="right" disabled></el-input-number>-->
            </td>
          </tr>
        </table>
        <div class="mark"></div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    components: {
    },
    data () {
      return {
        readCardId: '176866578162659321',
        method: '',
        detailsVisible: false,
        title: '',
        viewForm: {
          state: 0,
          truckNumber: '',
          axle: '',
          sourceType: 0,
          transCode: '',
          planCode: '',
          productName: '',
          sendAddress: '',
          receiveAddress: '',
          sendAddressDetail: '',
          receiveAddressDetail: '',
          driverName: '',
          driverPhone: '',
          driverIdcard: '',
          effectiveHourLoad: 0,
          effectiveHourTransport: 0,
          originalWeight: 0,
          originalDate: ''
        },
        editVisible: false,
        dialogVisible: false
      }
    },
    methods: {
      init (method, row) {
        if (method === 'view') {
          this.editVisible = true
          // this.$nextTick(() => {
          //   this.$refs.viewForm.resetFields()
          // })
          this.viewForm.state = row.state
          this.viewForm.truckNumber = row.truckNumber
          this.viewForm.axle = row.axle.axle
          this.viewForm.sourceType = row.sourceType
          this.viewForm.transCode = row.transCode
          this.viewForm.planCode = row.transportPlan.planCode
          this.viewForm.productName = row.product.name
          this.viewForm.sendAddress = row.transportPlan.sendAddress
          this.viewForm.receiveAddress = row.transportPlan.receiveAddress
          this.viewForm.sendAddressDetail = row.sendDetailAddress.detailAddress
          this.viewForm.receiveAddressDetail = row.receiveDetailAddress.detailAddress
          this.viewForm.driverName = row.truckDriver.name
          this.viewForm.driverPhone = row.truckDriver.phone
          this.viewForm.driverIdcard = row.truckDriver.idcard
          this.viewForm.effectiveHourLoad = row.effectiveHourLoad
          this.viewForm.effectiveHourTransport = row.effectiveHourTransport
          this.viewForm.originalWeight = row.originalWeight
          this.viewForm.originalDate = row.originalDate
          this.title = '派车单详情'
        }
      },
      close () {
        this.editVisible = false
      }
    }
  }
</script>
<style lang="scss" scoped>
  .first-form ::v-deep .el-input__inner {
    width: 170px;
  }
  .second-form ::v-deep .el-input__inner {
    width: 220px;
  }
  .readBut {
    width: 93px;
    height: 50px;
    background: #1890ff;
    border-radius: 5px;
    position: absolute;
    right: 40px;
    top: 20px;
    font-size: 23px;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    padding-top: 12px;
    cursor:pointer;
  }
.detail:first-child{
  margin-bottom: 20px;
}
.detail:last-child{
  padding-bottom: 25px;
  position: relative;
}
  .detail{
    .mark{
      position: absolute;
      bottom: 0;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FF3E3E;
      line-height: 20px;
    }
  }


</style>
